<script>

import * as echarts from 'echarts'

let regulatoryTrendsEcharts = []
export default {
  name: 'RegulatoryTrends',
  props: {
    pageData: {
      required: false,
      default: {}
    },
    projectList: {
      required: false,
      default: []
    }
  },
  destroyed() {
    this.disposeEcharts()
  },
  watch: {
    pageData: {
      deep: true,
      immediate: true,
      handler() {
        this.initEcharts()
      }
    }
  },
  methods: {
    getProjectName(projectId) {
      return this.projectList.find(project => project.value === projectId)?.label
    },
    getTotalTrend(projectId) {
      const list = this.pageData.projectData[projectId] || []
      if (list.length === 0) {
        return 0
      }
      return list.filter(item => item.carbonNeutralityDeviation != null).map(item => item.carbonNeutralityDeviation)
        .reduce((a, b) => a + b, 0)
    },
    getMaxRowByProjectAndField(projectId, field) {
      const list = this.pageData.projectData[projectId] || []
      if (list.length === 0) {
        return {}
      }
      return list.filter(item => item[field] != null).sort((a, b) => b[field] - a[field])[0]
    },
    getMinRowByProjectAndField(projectId, field) {
      const list = this.pageData.projectData[projectId] || []
      if (list.length === 0) {
        return {}
      }
      return list.filter(item => item[field] != null).sort((a, b) => a[field] - b[field])[0]
    },
    initEcharts() {
      this.disposeEcharts()
      this.$nextTick(() => {
        Object.keys(this.pageData.projectData).forEach(projectId => {
          const dataList = this.pageData.projectData[projectId]
          const sortDataList = dataList.slice().sort((a, b) => Date.parse(a.solidifyDate) - Date.parse(b.solidifyDate))

          const actualCarbonEmissionsList = [] // 实际碳排数据
          const actualCarbonZeroList = []// 实际碳减数据
          const actualCarbonNeutralityList = []// 实际碳汇数据

          const planCarbonEmissionsList = [] // 规划碳排数据
          const planCarbonZeroList = []// 规划碳减数据
          const planCarbonNeutralityList = []// 规划碳汇数据
          sortDataList.forEach(item => {
            actualCarbonEmissionsList.push(item.actualCarbonEmissions)
            actualCarbonZeroList.push(item.actualCarbonZero)
            actualCarbonNeutralityList.push(item.actualCarbonSequestration)
            planCarbonEmissionsList.push(item.planCarbonEmissions)
            planCarbonZeroList.push(item.planCarbonZero)
            planCarbonNeutralityList.push(item.planCarbonSequestration)
          })
          const ele = document.getElementById(`regulatoryTrendsEcharts_${projectId}`)
          const trendsEcharts = echarts.init(ele)
          regulatoryTrendsEcharts.push(trendsEcharts)
          trendsEcharts.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              orient: 'verticalAlign',
              x: 'left',
              y: 'top',
              itemGap: 30
            },
            grid: {
              left: '10%',
              right: '5%',
              bottom: '5%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: sortDataList.map(item => item.solidifyDate)
            },
            yAxis: {
              type: 'value'

            },
            series: [
              {
                name: '实际碳排',
                type: 'bar',
                color: 'rgb(250,200,88)',
                barWidth: '30',
                data: actualCarbonEmissionsList
              },
              {
                name: '实际碳减',
                type: 'bar',
                color: 'rgb(145,204,117)',
                barWidth: '30',
                data: actualCarbonZeroList
              },
              {
                name: '实际碳汇',
                type: 'bar',
                color: 'rgb(84,112,198)',
                barWidth: '20',
                data: actualCarbonNeutralityList
              },
              {
                name: '规划碳排',
                type: 'line',
                color: 'rgb(250,200,88)',
                data: planCarbonEmissionsList
              },
              {
                name: '规划碳减',
                type: 'line',
                color: 'rgb(145,204,117)',
                data: planCarbonZeroList
              },
              {
                name: '规划碳汇',
                type: 'line',
                color: 'rgb(84,112,198)',
                barWidth: '30',
                data: planCarbonNeutralityList
              }
            ]
          })
        })
      })
    },
    disposeEcharts() {
      regulatoryTrendsEcharts.forEach(item => {
        item.dispose()
      })
      regulatoryTrendsEcharts = []
    }
  }
}
</script>

<template>
  <div>
    <h2>5、规实趋势</h2>
    <div v-for="projectId in Object.keys(pageData.projectData)" :key="projectId">
      <div :id="`regulatoryTrendsEcharts_${projectId}`" style="width: 80%;height: 360px;margin: 0 5%"></div>
      <div style="margin:0 10%">
        <p>{{ getProjectName(projectId) }}
          {{ pageData.startDate }}至{{ pageData.endDate }}，
          碳中和规实总偏差值为{{ getTotalTrend(projectId) }}kgCO2。
          其中{{ getMaxRowByProjectAndField(projectId, 'carbonNeutralityDeviation').solidifyDate
          }}的碳中和偏差值最高，为{{ getMaxRowByProjectAndField(projectId, 'carbonNeutralityDeviation').carbonNeutralityDeviation
          }}kgCO2，
          {{ getMinRowByProjectAndField(projectId, 'carbonNeutralityDeviation').solidifyDate
          }}的碳中和偏差值最低，为{{ getMinRowByProjectAndField(projectId, 'carbonNeutralityDeviation').carbonNeutralityDeviation
          }} kgCO2。</p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
p {
  text-indent: 2em;
  line-height: 24px;
}
</style>
